<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()
const router = useRouter()
const activityId = computed(() => route.query.id)
const safeId = computed(() => String(activityId.value ?? ''))

const activityData: Record<string, {
  title: string
  desc: string
  img: string
  time: string
  tag: string
  btn: string
}> = {
  1: {
    title: '夏日大促',
    desc: '全场满199减50，限时抢购！畅享夏日购物乐趣，更多爆款等你来！',
    img: '/img/1.jpg',
    time: '2024-07-01 ~ 2024-07-15',
    tag: '限时优惠',
    btn: '立即抢购'
  },
  2: {
    title: '新品发布',
    desc: '2024春季新品，潮流上市，快来选购！',
    img: '/img/2.jpg',
    time: '2024-07-16 ~ 2024-07-31',
    tag: '新品上市',
    btn: '去看看'
  },
  3: {
    title: '会员专享',
    desc: '会员专属福利，积分兑好礼，更多惊喜等你来！',
    img: '/img/3.jpg',
    time: '2024-08-01 ~ 2024-08-10',
    tag: '会员福利',
    btn: '立即加入'
  },
  4: {
    title: '限时秒杀',
    desc: '每日10点限时秒杀，低至1折！手慢无！',
    img: '/img/4.jpg',
    time: '2024-08-11 ~ 2024-08-20',
    tag: '秒杀专场',
    btn: '马上秒杀'
  }
}

function goHome() {
  router.push({ name: 'home' })
}
</script>

<template>
  <div style="padding: 24px; max-width: 600px; margin: 0 auto;">
    <div v-if="activityData[safeId]">
      <div style="position:relative;">
        <img :src="activityData[safeId].img" :alt="activityData[safeId].title"
          style="width:100%;border-radius:16px;box-shadow:0 4px 16px #eee;margin-bottom:20px;" />
        <span style="position:absolute;top:16px;left:16px;background:#ff4d4f;color:#fff;padding:4px 12px;border-radius:12px;font-size:14px;">
          {{ activityData[safeId].tag }}
        </span>
      </div>
      <h1 style="font-size:2.2rem;margin-bottom:10px;color:#222;">{{ activityData[safeId].title }}</h1>
      <div style="color:#888;font-size:15px;margin-bottom:8px;">
        活动时间：{{ activityData[safeId].time }}
      </div>
      <p style="font-size:1.15rem;color:#444;margin-bottom:24px;">{{ activityData[safeId].desc }}</p>
      <button
        style="background:#ff4d4f;color:#fff;padding:12px 32px;border:none;border-radius:24px;font-size:1.1rem;cursor:pointer;box-shadow:0 2px 8px #fbb;"
      >
        {{ activityData[safeId].btn }}
      </button>
      <div style="margin-top:32px;text-align:center;">
        <button @click="goHome"
          style="background:#f5f5f5;color:#888;padding:8px 24px;border:none;border-radius:16px;font-size:1rem;cursor:pointer;">
          返回首页
        </button>
      </div>
    </div>
    <div v-else>
      <h2>未找到该活动</h2>
    </div>
  </div>
</template>
